import React, { Component } from 'react';

import { Table } from 'antd';

import curson from './index.module.css'
import getday from '../../util/getday'

class Classroom extends Component {
  state = {
    change: false,
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '上午',
        dataIndex: 'AM',
        key: 'AM',
        render: (value, item) => value ? <span onClick={() => this.changeBtn(item, 'AM')}>优</span> : <span onClick={() => this.changeBtn(item, 'AM')}>良</span>
      },
      {
        title: '下午',
        dataIndex: 'PM',
        key: 'PM',
        render: (value, item) => value ? <span onClick={() => this.changeBtn(item, 'PM')}>优</span> : <span onClick={() => this.changeBtn(item, 'AM')}>良</span>
      },
      {
        title: '作业完成情况',
        dataIndex: 'job',
        key: 'job',
        render: (value, item) => value ? <span onClick={() => this.changeBtn(item, 'job')}>优</span> : <span onClick={() => this.changeBtn(item, 'AM')}>良</span>
      },
      {
        title: '是否互动',
        dataIndex: 'interact',
        key: 'interact',
        render: (value, item) => value ? <span onClick={() => this.changeBtn(item, 'interact')}>优</span> : <span onClick={() => this.changeBtn(item, 'AM')}>良</span>
      },
      {
        title: '互动是否合格',
        dataIndex: 'qualified',
        key: 'qualified',
        render: (value, item) => value ? <span onClick={() => this.changeBtn(item, 'qualified')}>优</span> : <span onClick={() => this.changeBtn(item, 'AM')}>良</span>
      },
      {
        title: '备注',
        dataIndex: 'word',
        key: 'word',
        render: value => value ? <span>{value}</span> : this.state.change ? <input placeholder="输入备注" style={{ outline: 'none', border: 'none' }} /> : <span onClick={() => this.$message.warning('请点击添加记录按钮')}>无</span>
      }
    ],
    dataSource: [],
    className: '',
    school: '',
    classType: '',
    teacher: '',
    coach: '',
    course: '',
    arrTime: ''
  }
  //改变按钮
  changeBtn = (item, value) => {
    if (this.state.change) {
      let data = [...this.state.dataSource]
      data.forEach(i => {
        if (i.id == item.id) {
          if (i[value]) {
            i[value] = false
            this.setState({ dataSource: data })
            return
          }
          i[value] = true
          this.setState({ dataSource: data })
        }
      })
      return
    }
    this.$message.warning('请点击添加记录按钮')

  }
  save = () => {
    let id = localStorage.getItem('classid')
    const { arrTime, dataSource } = this.state
    if (this.state.change) {
      let time = new Date().getTime();
      if (getday(time) === getday(arrTime[0] * 1)) {
        this.$message.warning('您今日已经添加过课堂情况')
        this.setState({ change: false })
        this.getnewlist()
        return
      } else {
        arrTime.unshift(time + '')
        this.$httpReq(this.$api.addClassLog({ classid: id, time: arrTime[0], arr: dataSource }), res => {
        })
      }
      this.setState({ change: false })
      return
    }
    this.setState({ change: true })
  }
  //拿到官方数据
  getnewlist = async () => {
    let id = localStorage.getItem('classid')
    await this.$httpReq(this.$api.getStudentList(), res => {
      const { code, data } = res;
      if (code) {
        const studentData = data.studentData.filter(item => item.classid == id)
        let newdata = [];
        studentData.forEach(item => {
          let obj = {
            id: item.studentid,
            name: item.name,
            AM: true,
            PM: true,
            job: true,
            qualified: true,
            interact: true
          }
          newdata.push(obj)
        })
        this.setState({ dataSource: newdata })
      }
    })
  }
  //拿到正确数据
  getlist = (am, data2) => {
    let data = this.state.dataSource
    if (data2) {
      data.forEach(i => {
        data2.forEach(j => {
          if (i.id == j) {
            i[am] = false;
          }
        })
      })
      this.setState({ dataSource: data })
    }
  }
  getToday = async time => {
    await this.getnewlist()
    let id = localStorage.getItem('classid')
    this.$httpReq(this.$api.searchClassCase({ classid: id, time }), res => {
      const { code, arr } = res;
      if (code) {
        arr.forEach(item => {
          let AM = item.AM && item.AM.split(',')
          let PM = item.PM && item.PM.split(',')
          let interact = item.interact && item.interact.split(',')
          let job = item.job && item.job.split(',')
          let qualified = item.qualified && item.qualified.split(',')
          this.getlist('AM', AM)
          this.getlist('PM', PM)
          this.getlist('job', job)
          this.getlist('interact', interact)
          this.getlist('qualified', qualified)
        })
      }
    })
  }
  render() {
    const { className, school, classType, teacher, coach, course, change, arrTime } = this.state;
    return <div className={curson.B_cursonBox}>
      <div className={curson.B_cursonTop}>
        <span></span>
        <span>基本信息</span>
      </div>
      <div className={curson.B_infor}>
        <div className={curson.B_infors}>
          <p>班级名称：{className && className}</p>
          <p>现阶段授课老师：{teacher && teacher} </p>
        </div>
        <div className={curson.B_infors}>
          <p>所属学院：{school && school}</p>
          <p>现阶段辅导员：{coach && coach}</p>
        </div>
        <div className={curson.B_infors}>
          <p> 班级类型：{classType && classType}</p>
          <p> 现阶段课程：{course && course}</p>
        </div>

      </div>
      <div className={curson.B_cursonTop}>
        <span></span>
        <span onClick={() => console.log(this.state.dataSource)}>每日课堂情况</span>

        <span className={curson.B_addrecode} onClick={() => this.save()}>{change && change ? '保存' : '添加记录'}</span>

      </div>
      <div className={curson.B_testTable}>
        <div className={curson.left}>
          {
            arrTime && arrTime.map(item => {
              return <span style={{ height: '30px', width: '70%', textAlign: 'center', display: 'block', margin: '10px auto' }} onClick={() => this.getToday(item)}>{getday(item * 1)}</span>
            })
          }
        </div>
        <Table dataSource={this.state.dataSource} columns={this.state.columns} className={curson.right} pagination={{ pageSize: 5 }} />
      </div>
    </div >
  }
  componentDidMount() {
    let id = localStorage.getItem('classid')
    let arr = []
    this.$httpReq(this.$api.getStudentList(), res => {
      const { code, data } = res;
      if (code) {
        data.classData.forEach(item => {
          if (item.classid == id) {
            this.setState({ className: item.className, course: item.course, school: item.school, classType: item.classType == 40 ? '大班' : item.classType == 30 ? '中班' : "小班" })
            data.userData.forEach(j => {
              if (item.teacherid == j.userid) {
                this.setState({ teacher: j.name })
              }
              if (item.coachid == j.userid) {
                this.setState({ coach: j.name })
              }
            })
          }
        })
        const studentData = data.studentData.filter(item => item.classid == id)
        let newdata = [];
        studentData.forEach(item => {
          let obj = {
            id: item.studentid,
            name: item.name,
            AM: true,
            PM: true,
            job: true,
            qualified: true,
            interact: true
          }
          newdata.push(obj)
        })
        this.setState({ dataSource: newdata })
      }
    })
    this.$httpReq(this.$api.classLogList({ classid: id }), res => {
      const { code, data } = res;
      if (code) {
        let caseList = data.classCaseList.filter(item => item.classid == id)
        caseList.forEach(item => {
          arr.push(item.time)
        })
        arr.sort((a, b) => { return b - a })
        this.setState({ arrTime: arr })
      }
    })

  }

}
export default Classroom